<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Samsara526">
    <title>Waiting For You</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css
  " rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
    <link href="https://cdn.bootcss.com/fullPage.js/3.0.7/fullpage.css" rel="stylesheet">
    <link href="css/typing.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <style>
        .hidden {
            display: none;
        }

        .btn-primary {
            border-color: transparent;
            background-color: transparent;
            background-image: linear-gradient(to bottom right, #f78ca0, #fe9a8b);
        }

        .btn-primary:hover {
            border-color: transparent;
            background-color: transparent;
            background-image: linear-gradient(to bottom right, #f78ca0, #fe9a8b);
        }

        .btn-primary:focus,
        .btn-primary:active:focus,
        .btn-primary.active:focus,
        .btn-primary.focus {
            box-shadow: 0 0 0 0.4rem rgba(247, 140, 160, 0.5);
        }

        .card {
            background-image: linear-gradient(to bottom right, #48c6ef, #6f86d6);
            color: #ffffff;
            border: 1px solid rgba(111, 134, 223, 0.125);
            border-radius: 0.25rem;
        }

        .maintext {
            color: #ffffff;
            text-indent: 2em;
            display: block;
        }
    </style>
</head>

<body>
    <div id="fullpage">
        <div class="section active" id="section1">
            <div class="container">
                <div class="row">
                    <div class="col col-sm">
                        <div id="part1" class="text-light"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section" id="section2">
            <div class="container">
                <div class="row">
                    <div class="col col-sm">
                        <div id="part2" class="text-light"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section" id="section3">
            <div class="container">
                <div class="row">
                    <div class="col col-sm">
                        <div id="part3">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="source1" class="hidden">
        致路上遇见的你：<br>
        <br>
        <div class="maintext">你好，我很高兴在地铁上遇见你。<br></div>
        <div class="maintext">我不得不承认，从你上车的那一刻起，我就被你吸引了。<br></div>
        <div class="maintext">你的美丽和气质让我无法移开视线。我知道这可能有些冒昧，但我实在忍不住想要认识你。<br></div>
<!--        <div class="maintext">你好，上次遇到你，第一眼感觉十分动人，有种忍不住想再看一眼的冲动。<br></div>-->
<!--        <div class="maintext">当再次望向你时，能肯定你身上的气质确实很吸引到我。<br></div>-->
<!--        <div class="maintext">但由于我的社恐，所以抑制住了想要认识的冲动。<br></div>-->
<!--        <div class="maintext">但回到家，就做了这个网页，并下定决心倘若能再遇见你，我会以借助一个理由传达给你。<br></div>-->
<!--        <div class="maintext">以此跟你打个招呼，希望你不要受到惊吓^_^<br></div>-->
        <br>
    </div>

    <div id="pic1" class="col col-md-6 hidden">
        <img id="pic1" src="img/pic1.gif" class="img-thumbnail rounded mx-auto d-block" width="250px">
        <br>
        <br>
    </div>

    <div id="button1" class="hidden">
        <button id="gotoSection2" class="btn btn-primary btn-lg btn-block shadow">下一页</button>
    </div>

    <div id="source2" class="hidden">
        <div class="maintext">希望能有机会认识下你。<br></div>
        <div class="maintext">如果可以的话，<br></div>
        <div class="maintext">下一页有我的联系方式哦。<br></div>
        <div class="maintext">（不行的话也没有关系。<br></div>
        <div class="maintext"> 实在抱歉，抱歉。打扰啦。祝你今天过得愉快！）<br></div>
        <br>
    </div>

    <div id="pic2" class="hidden">
        <img id="pic1" src="img/pic2.gif" class="img-thumbnail rounded mx-auto d-block" width="250px">
        <br>
        <br>
    </div>

    <div id="button2" class="hidden">
        <button id="gotoSection3" class="btn btn-primary btn-lg btn-block shadow">下一页</button>
    </div>

    <div id="source3" class="hidden">
        <!-- <div class="card bg-primary text-white shadow text-center">
            <h5 class="card-header">输入你的号码</h5>
            <div class="card-body">
                <form method="post" name="form1" id="form1">
                    <div class="form-group">
                        <input id="number" name="number" type="text" class="form-control shadow">
                        <hr>
                        <input id="sendNumber" type="button" value="发送" class="btn btn-primary btn-block shadow">
                    </div>
                </form>
            </div>
        </div> -->
        <img src="img/baiye-vx.png" class="img-thumbnail rounded mx-auto d-block" width="250px">
    </div>

    <div id="button3" class="hidden">
        <a id="addMate" class="btn btn-primary btn-lg btn-block shadow"
            href="https://u.wechat.com/EFhVzXZW2lGoQL27fmatqtw">add</a>
    </div>

    <div id="iknow" class="hidden text-center">
        <br>
        <div id="stext" class="alert alert-success shadow" role="alert">

        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="js/fullpage.js"></script>
    <script src="js/typing.js"></script>
    <script>
        var typing0IsFirst = true;
        var typing1IsFirst = true;
        var typing2IsFirst = true;
        var typing3IsFirst = true;

        $(document).ready(function () {

            $("#gotoSection2").click(function () {
                $.fn.fullpage.moveSectionDown();
            });

            $("#gotoSection3").click(function () {
                $.fn.fullpage.moveSectionDown();
            });

            $("#sendNumber").click(function () {   //sendNumber的ajax事件
                // var xhr = new XMLHttpRequest();
                // var number = document.getElementById("number").value;
                // xhr.open('POST', "test.php");
                // // xhr.open('GET', "hello.html");
                // xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                // xhr.send("number=" + number);
                // xhr.onreadystatechange = function () {
                //     if (xhr.readyState == 4 && xhr.status == 200) {
                //         console.log(xhr.responseText);
                //         $("#stext").text(xhr.responseText);
                //         $("#part3").append($("#iknow").hide().slideDown());
                //     }
                // }
                alert("很高兴认识你^_^")
            })


            $("#fullpage").fullpage({

                sectionsColor: ['linear-gradient(to bottom right, #a1c4fd, #c2e9fb)',
                    'linear-gradient(to bottom right, #a18cd1, #fbc2eb)',
                    'linear-gradient(to bottom right, #7DE2FC, #B9B6E5)'],  //依次设置section背景色

                afterRender: function () {  //DOM就绪时运行的事件
                    $.fn.fullpage.setAllowScrolling(false); //禁止滚动
                    var typing = new Typing({
                        source: document.getElementById('source1'),
                        output: document.getElementById('part1'),
                        delay: 80,
                        done: function () {       //完成打印后的回调事件
                            $("#part1").append($("#pic1").hide().slideDown());
                            $("#part1").append($("#button1").hide().slideDown());
                            $.fn.fullpage.setAllowScrolling(true); //允许滚动
                        }
                    });
                    typing.start();
                },

                onLeave: function (origin, destination, direction) {
                    var loadedSection = this;
                    if (destination.index == 1 && typing1IsFirst == true) {  //滚动到第二页的事件
                        $.fn.fullpage.setAllowScrolling(false);
                        var typing = new Typing({
                            source: document.getElementById('source2'),
                            output: document.getElementById('part2'),
                            delay: 80,
                            done: function () {         //完成打印后的回调事件
                                $.fn.fullpage.setAllowScrolling(true);
                                typing2IsFirst = false;
                                $("#part2").append($("#pic2").hide().slideDown());
                                $("#part2").append($("#button2").hide().slideDown());
                            }
                        });
                        typing.start();
                    }
                    if (destination.index == 2) {  //滚动到第三页的事件
                        // $("#part3").append($("#source3").hide().slideDown());
                        $.fn.fullpage.setAllowScrolling(false);
                        var typing = new Typing({
                            source: document.getElementById('source3'),
                            output: document.getElementById('part3'),
                            delay: 80,
                            done: function () {         //完成打印后的回调事件
                                // $.fn.fullpage.setAllowScrolling(true);
                                typing3IsFirst = false;
                                $("#part3").append($("#pic3").hide().slideDown());
                                // $("#part3").append($("#button3").hide().slideDown());
                            }
                        });
                        typing.start();
                    }
                }
            });
        });
    </script>
</body>

</html>